<template>
    <div>
        <div style="margin-top:2.5rem;">
            <navtop :title="'用户购物车'"></navtop>
        </div>
        <div v-show="notempty" class="shopcarlistContainer">
            <div v-for="(item, index) in shopcarList" :key="index" class="goodslist">
                <div @click="godetails(item.shopcargoods)" class="left">
                    <img :src="item.shopcargoods.goodCoverImg" alt="img" />
                </div>
                <div class="right">
                    <div class="goodname">{{item.shopcargoods.goodName}}</div>
                    <div class="price">{{item.shopcargoods.goodPrice}}￥</div>
                    <div class="goodnums">1件</div>
                    <div class="btns">
                        <button @click="orderring(item.shopcargoods,index)">下单</button>
                        <button @click="remove(item,index)">移除</button>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="!notempty" class="empty">
            <div class="enptytext">空空如也！</div>
            <mt-button @click="goindex" class="btns" plain type="primary" size="large">去逛逛~</mt-button>
        </div>
    </div>
</template>


<script>
import navtop from "../navtop/nav.vue";
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            shopcarList: [],
            notempty: true
        };
    },
    methods: {
        // 去逛逛
        goindex() {
            this.$router.push({ name: "home" });
        },
        //去详情页
        godetails(goods) {
            this.$router.push({
                name: "gooddetails",
                params: { id: goods.id }
            }); // 这里使用路由传参的方式将id传到详细页
        },
        // 下单
        orderring(goods, index) {
            this.$ajax
                .post("order/", {
                    goods: this.goods.id,
                    goodsnums: 1
                })
                .then(res => {
                    this.shopcarList.splice(index, 1);
                    let originslist = this.$store.state.order.push(res.data);
                    this.$store.commit("orderStore", originslist);
                    Toast({
                        message: "已下单",
                        position: "top"
                    });
                })
                .catch(err => {
                    Toast({
                        message: "网络错误",
                        position: "top"
                    });
                });
        },
        // 移除
        remove(item, index) {
            this.$ajax
                .delete("shopcar/" + item.id)
                .then(res => {
                    //console.log(res.data);
                    this.shopcarList.splice(index, 1);
                    this.$store.commit("shopcarStore", this.shopcarList);
                    Toast({
                        message: "已移除",
                        position: "top"
                    });
                })
                .catch(err => {
                    console.log("shopcarremove --- error");
                    Toast({
                        message: "网络错误",
                        position: "top"
                    });
                });
        }
    },
    mounted() {
        let that = this
        that.shopcarList = that.$store.state.shopcar;
        if (that.$store.state.shopcar.length > 0) {
            that.notempty = true;
        } else {
            that.notempty = false;
        }
    },
    components: {
        navtop
    }
};
</script>


<style lang="scss" scoped>
.empty {
    margin-top: 45%;
    .enptytext {
        text-align: center;
        font-size: 1rem;
        font-style: italic;
        opacity: 0.5;
    }
    .btns {
        margin-top: 30px;
    }
}
.shopcarlistContainer {
    padding: 2px;
    .goodslist {
        padding: 2px;
        height: 104px;
        display: flex;
        margin-top: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        .left {
            width: 30%;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .right {
            width: 70%;
            padding: 2px;
            .goodname {
                font-size: 0.9rem;
                opacity: 0.8;
            }
            .price {
                font-size: 0.9rem;
                margin-top: 10px;
                color: red;
            }
            .goodnums {
                font-size: 0.8rem;
                margin-top: 10px;
            }
            .btns {
                display: flex;
                justify-content: space-between;
                // margin-top: 10px;
                button:nth-child(1) {
                    border-radius: 5px;
                    border: none;
                    background-color: #26a2ff;
                }
                button:nth-child(2) {
                    border-radius: 5px;
                    border: none;
                    background-color: red;
                    opacity: 0.8;
                    margin-right: 15px;
                }
            }
        }
    }
}
</style>